<template>
  <view class='wrap'>
	<!-- <u-navbar title="" border/> -->
    <view class='one'>
      <view class='setting'>
      <view class="setting-l">
        <!-- <i class='iconfont icon-saoyisao' @tap="scan"></i> -->
        <my-scanCode />
      </view>
      <view class="setting-r">
        <view v-if="token"><i class='iconfont icon-jiahao' @tap="setting">发布</i></view>
        <view><i class='iconfont icon-set' @tap="setting"></i></view>
      </view>
      </view>
      <view>
        <view class="info" v-if="token">
          <view class="info-one">
						<u--image :showLoading="true" :src="userInfo.avatar" width="75px" height="75px" shape="circle" @click="click"></u--image>
            <view class="info-name">
             <view class="name"> <b>{{userInfo.nickname || userInfo.user_name || "网友820820"}}</b></view>
             <view>
							<span><b>{{userInfo.myFocus || 0 }}</b>关注</span>
              <span><b>{{userInfo.myFans || 0 }}</b>粉丝</span>
              <!-- <span><b>{{userInfo.praise}}</b>获赞</span>暂时未开发 -->
						 </view>
            </view>
          </view>
          <view class="info-two" v-if="userInfo.introduce">
          <p>{{userInfo.introduce}}</p>
          </view>
          <view class="info-three">
            <p>IP 属地：{{userInfo.city || "未知"}}</p>
          </view>
          <view class="info-four">
						<u-button type="primary" class="custom-style" size="small" @tap="$u.toast('暂时未开发此功能')">申请认证</u-button>
						<u-button type="primary" class="custom-style" size="small" @tap="$u.route('/pages/setting/profile/index')">编辑资料</u-button>
						<u-button type="primary" class="custom-style" size="small" @tap="$u.toast('暂时未开发此功能')"><i class="iconfont icon-fenxiang"></i></u-button>
          </view>
        </view>
        <view class="cover" v-else @tap="toLogin">登录</view>
      </view>
    </view>
    <view class="two">
			<u-grid :border="false" col="4" @click="clickTwoGrid">
            <u-grid-item v-for="(item,index) in twoGridList" :key="index" >
							<view class="item">
								<i :class="'iconfont ' + item.icon"></i>
								<span>{{item.title}}</span>
							</view>
            </u-grid-item>
        </u-grid>
    </view>
    <view class="bottom">
      <view class="three" v-if="!token">
     <view> <span>“</span>分享今天值得记录的瞬间 <span>”</span></view>
      <view @tap="goToPublish" class="btn-publish">
				<u-button type="primary">
					<i class='iconfont icon-jiahao'></i>
					发布
				</u-button>
      </view>
      </view>
      <view class="four" v-else>
				<u-sticky bgColor="#fff">
    <u-tabs :list="myList">
		</u-tabs>
  </u-sticky>
      </view>
    </view>
		<u-popup :show="isAllServiceShow" mode="right" @close="isAllServiceShow = false" @open="isAllServiceShow = true" >
				<AllService @close="isAllServiceShow=false"/>
		</u-popup>
    <my-tabbar name="user" />
   </view>
</template>

<script >
import { mapGetters } from 'vuex'
import { getUserHomePage } from '@/api/user'
import { getUserArticle } from '@/api/article'
import AllService from '@/pages/user/components/all-service.vue'
export default {
  name: 'User',
  components: {
    AllService,
  },
  data (){
    return {
			// twoGridList
			twoGridList: [{
                    icon: 'icon-pinglun',
                    title: '评论'
                    },
                    {
											icon: 'icon-shoucang',
                        title: '收藏'
                    },
                    {
											icon: 'icon-xiazai',
                        title: '下载'
                    },
                    {
											icon: 'icon-lishi',
                        title: '历史'
                    },
                    {
											icon: 'icon-xiaoxi',
                        title: '消息'
                    },
                    {
											icon: 'icon-dianzan',
                        title: '点赞'
                    },
                    {
											icon: 'icon-jubao',
                        title: '举报'
                    },
                    {
											icon: 'icon-quanbu',
                        title: '全部'
                    }
                ],
			tabbarList: [
        { name: "首页", icon: "home" },
        { name: "视频", icon: "photo" },
        { name: "直播", icon: "play-right" },
        { name: "我的", icon: "account" },
      ],
      myList: [
        { name: '全部' },
        { name: '文章' },
        { name: '视频' },
        { name: '问答' },
        { name: '小视频' },
        { name: '微头条' }

      ],
      isAllServiceShow: false,
      query:{
        pageNum:1, pageSize:10
      },
      myAllArticle:[],
      total:0
    }
  },
  computed: {
    ...mapGetters([
      'token', 'userInfo','userId'
    ])
  },
  created () {
    // this.getUserHomePage(this.userId)
    this.getUserArticle(this.userId)
  },
  methods: {
		clickTwoGrid(name) {
			console.log(`点击了第${name}个`);
			if(name==2){
				uni.$u.route('/pages/user/download/index')
			}else if(name==4){
				uni.$u.route('/pages/user/message/index')
			}else if(name==7){
				this.isAllServiceShow = true
			}else{
				uni.$u.route('/pages/user/content/index')
			}
    },
		toLogin(){
			uni.$u.route('/pages/login/index')
		},
    // 获取用户主页信息
    async getUserHomePage(id){
      const userInfo = await getUserHomePage(id)
      this.$store.commit('user/SET_USERINFO',userInfo)
    },
    // 获取用户发布的文章列表 根据用户id
    async getUserArticle(id){
      const res = await getUserArticle(id,this.query)
			if(!res) return 
      this.myAllArticle = res.list
      this.total = res.total
    },
    // 点击发布
    goToPublish () {
			uni.$u.toast('请先登录')
    },
    setting () {
			uni.$u.route('/pages/setting/index')
    },
    scan () {
      console.log('扫一扫')
    },
    goMyContent () {
			uni.$u.route('/pages//user/mycontent')
    }
  }
}
</script>
<style lang="scss" scoped>
.wrap{
  background-color: #f8f8f8;
}
.one{
  height: 270px;
  padding: 15px;
  text-align: center;
  box-sizing: border-box;
  .setting{
  display: flex;
  justify-content: space-between;
  .icon-saoyisao{font-size: 27px;}
  .icon-set {
    font-size: 31px;
  }
  .setting-r{
      display: flex;
			align-items: center;
      .icon-jiahao{font-size: 16px;
        margin-right: 10px;}
    }
}
.cover{
  width: 100px;
  height: 100px;
  background-color: rgb(210, 92, 92);
  border-radius:50px;
  line-height: 100px;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 35%);
  box-shadow: 0 0 10px #ddd;
}
.info{
  .info-one{
    display: flex;
    align-items: center;
    margin:20px 0px 15px 0px;
    .info-name{
      text-align: left;
      margin-left:10px;
			.name{margin-bottom: 5px;}
      b{
        text-align: center;
        font-size:18px;
        font-weight: 500;
        margin-right:2px;
      }
      span{
        font-size: 12px;
        margin: 0 5px;
      }
    }
  }
  .info-two,.info-three{
    p{margin:2px 0px 0px 0px;}
    text-align: left;
    font-size: 14px;
  }
  .info-four{
		
		display: flex;
		float: left;
    margin-top: 7px;
		.custom-style {
		width: 66px;
		margin-right: 6px;
	}
  }
}
}
.two{
	background-color: #fff;
  ::v-deep .van-grid-item__content{
    padding: 10px 0px;
  }
  .item{
    display: flex;
    flex-direction: column;
		margin: 10px 0px;
    .iconfont{
      font-size: 30px;
      margin-bottom: 3px;
    }
    font-size:14px;
  }
}
.three{
  background-color: #fff;
	display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
		padding: 20px 0px 90px 0px;
		.btn-publish{
			margin-top:10px;
		}
  span{
    margin: 0 5px;
    font-size: 36px;
    color:#eee5e5;
  }

}
.bottom{
  margin-top: 5px;
}

</style>
